
<template>
  <div class="globe-box" id="globe-box-id" ref='vantaRef'>
  </div>
</template>

<script>
import * as THREE from 'three'
import GLOBE from 'vanta/src/vanta.globe'
export default {
   mounted() {
    this.vantaEffect = GLOBE({
      el: this.$refs.vantaRef,
      THREE: THREE
    });
    VANTA.GLOBE({
      el: this.$refs.vantaRef,
      mouseControls: true,
			touchControls: true,
			gyroControls: false,
			scale: 1.00,
			size: 4.00,
			scaleMobile: 1.00,
			backgroundColor: 0xafdbff,
			color: 0x3db6cd
    })

  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}


</script>

<style scoped>
.globe-box{
	width: 100%;
	height: 100%;
}
</style>

